<template>
  <div class="home">
    <div class="home-title-wrap">
      <div class="company">
        <el-select
          v-model="wcName"
          filterable
          placeholder="请选择"
          @change="changeWcNameHandler"
        >
          <el-option
            v-for="item in wcNameLists"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="home-title"></div>
      <div class="time">{{ clockDate }}</div>
    </div>
    <div class="home-content">
      <div class="left-wrap">
        <toilet-statistics
          class="left-item"
          :wcData="wcData"
          :HdData="HdData"
        ></toilet-statistics>
        <grade class="left-item" :wcData="wcData"></grade>
        <air class="left-item" :wcData="wcData"></air>
      </div>
      <MaterialDetection class="china-map" :HdData="HdData"></MaterialDetection>
      <div class="right-wrap">
        <toilet class="right-item" :wcAllInfo="wcAllInfo"></toilet>
        <warning class="right-item" :hdWarnList="hdWarnList"></warning>
        <evaluate
          class="right-item"
          :starWs="wcData.starWs"
          :starGl="wcData.starGl"
          :starSb="wcData.starSb"
        ></evaluate>
      </div>
    </div>
  </div>
</template>

<script>
import { showClock } from "@/utils/utils";
import { getCdWebInfoNew, getWcHdData2Dev } from "@/utils/api";
import MaterialDetection from "@/components/materia/MaterialDetection.vue";
import ToiletStatistics from "@/components/materia/ToiletStatistics.vue";
import Grade from "@/components/left/Grade.vue";
import Air from "@/components/left/Air.vue";
import Toilet from "@/components/right/Toilet.vue";
import Warning from "@/components/right/Warning.vue";
import Evaluate from "@/components/right/Evaluate.vue";
export default {
  name: "Home",
  data() {
    return {
      clockDate: "",
      province: "", //省份
      wcName: "", //省份的厕所名称
      wcNameLists: [],
      hdWarnList: [],
      chinaData: [],
      wcData: {},
      wcAllInfo: {},
      HdData: [],
      clockInterval: null,
      dataInterval: null,
    };
  },
  components: {
    MaterialDetection,
    ToiletStatistics,
    Grade,
    Air,
    Toilet,
    Warning,
    Evaluate,
  },
  mounted() {
    // const wcName ="" ||sessionStorage.getItem("wcName");
    // const province = "" ||sessionStorage.getItem("province");
    // console.log(wcName);
    // console.log(province);
    // if (!!wcName && !!province) {
    //   this.province = province;
    //   this.wcName = wcName;
    // }
    this.getData();
    this.clockDate = showClock();
    this.clockInterval = setInterval(() => {
      this.clockDate = showClock();
    }, 1000);
    this.dataInterval = setInterval(() => {
      this.getData();
    }, 1000 * 1.5);
  },
  beforeDestroy() {
    if (this.clockInterval) {
      clearInterval(this.clockInterval);
    }
    if (this.dataInterval) {
      clearInterval(this.dataInterval);
    }
  },
  methods: {
    getData() {
      const { province, wcName } = this;
      //清空数据
      // this.wcNameLists = [];
      // this.hdWarnList = [];
      // this.wcData = {};
      // this.wcAllInfo = {};
      getCdWebInfoNew({ province, wcName }).then((data) => {
        if (data) {
          if (data.provinceList && Array.isArray(data.provinceList)) {
            this.chinaData = data.provinceList;
          }
          if (data.wcNameLists && Array.isArray(data.wcNameLists)) {
            this.wcNameLists = data.wcNameLists;
          }

          if (data.wcData) {
            data.wcData.starWs = 5;
            data.wcData.starGl = 5;
            data.wcData.starSb = 5;
            this.wcData = data.wcData;
            const { wcName, province } = data.wcData;
            this.wcName = wcName;
            this.province = province;
            // sessionStorage.setItem("wcName", wcName);
            // sessionStorage.setItem("province", province);
          }
          if (data.hdWarnList && Array.isArray(data.hdWarnList)) {
            this.hdWarnList = data.hdWarnList;
          }
          if (data.wcAllInfo) {
            this.wcAllInfo = data.wcAllInfo;
          }
        }
      });
      getWcHdData2Dev().then((data) => {
        //写死：智能香黑机
        data.push({
          name: "智能香黑机",
          dlCount: 100,
          surplus: 100,
        });
        this.HdData = data;
      });
    },
    ChangePrivinceHandler(province) {
      if (this.wcData) {
        this.province = province;
        //清空下拉框
        this.wcName = "";
        this.getData();
      }
    },
    changeWcNameHandler() {
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 1080px;
  padding: 0px 35px 20px 35px;
  box-sizing: border-box;

  .home-title-wrap {
    display: flex;
    align-items: flex-end;

    .home-title {
      margin: 0px 100px 0px 120px;
      width: 972px;
      height: 143px;
      line-height: 143px;
      color: #26fbf3;
      font-size: 56px;
      font-family: SourceHanSansSC;
      font-weight: bold;
      background: url("../assets/img/home-07-02.png") no-repeat center center;
      background-size: contain;
    }

    .company {
      width: 194px;
      > div {
        width: 100%;
      }
    }

    .time {
      font-size: 23px;
      font-weight: 400;
      color: #ffffff;
    }

    ::v-deep .el-select {
      .el-input__inner {
        background-color: #0f144e;
        border: 1px solid #94bcdd;
        color: #f7f7f7;
        height: 40px;
        line-height: 40px;
        border-radius: 0px;
        font-size: 14px;
      }

      .el-input__icon {
        line-height: 40px;
      }
    }
  }

  .home-content {
    flex: 1;
    display: flex;
    margin-top: 30px;

    .left-wrap {
      width: 505px;

      .left-item {
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0px;
        }
      }
    }

    .china-map {
      min-width: 800px;
      height: 880px;
      background: url("../assets/img/material-bg.png") no-repeat center center;
      background-size: contain;
      margin: 0px 15px;
    }

    .right-wrap {
      width: 505px;

      .right-item {
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-select__caret {
  &.el-icon-arrow-up:before {
    content: "\e78f";
  }
}
body {
  .el-select-dropdown__item {
    font-size: 14px;
  }
}
</style>
